<template>
  <el-card class="list-page">
    <div class="list-h">
      <el-form
        :inline="true"
        :model="formInline"
        ref="formRef"
        class="demo-form-inline"
      >
        <el-form-item label="单体工程" prop="monomerId">
          <el-select
            class="width-custom140"
            v-model="formInline.monomerId"
            clearable
            filterable
          >
            <el-option
              v-for="item in monomerList"
              :label="item.engineerName"
              :key="item.id"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="工程类型" prop="atypeId">
          <el-select
            clearable
            filterable
            class="width-custom140"
            v-model="formInline.atypeId"
          >
            <el-option
              v-for="item in atypeList"
              :label="item.itemText"
              :key="item.id"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="子工程类型" prop="a1TypeId">
          <el-select
            clearable
            filterable
            class="width-custom140"
            v-model="formInline.a1TypeId"
          >
            <el-option
              v-for="item in a1TypeList"
              :label="item.itemText"
              :key="item.id"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="提单状态" prop="billStatus">
          <el-select
            class="width-custom140"
            v-model="formInline.billStatus"
            clearable
            filterable
          >
            <el-option label="未提单" :value="0" />
            <el-option label="已提单" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-date-picker
            class="width-custom230"
            v-model="timeValue"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            @change="handleChangeDate"
          />
        </el-form-item>

        <el-form-item style="float: right">
          <el-button
            type="primary"
            v-auth="`/projectsS/witness--export`"
            class="add-option"
            @click="exportFunc"
            >导出</el-button
          >
          <el-button @click="handleReset">重置</el-button>
          <el-button
            type="primary"
            @click="handleSearch"
            v-auth="`/projectsS/witness--query`"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-skeleton
      style="height: calc(100vh - 340px)"
      :rows="8"
      :loading="loading"
      animated
    ></el-skeleton>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      v-loading="loading"
      v-show="!loading"
      :height="'calc(100vh - 340px)'"
      :header-cell-style="{
        background: '#F7F9FD',
        color: '#000',
        height: '48px',
        borderTop: '1px soild #E4E8F2'
      }"
    >
      <template #empty>
        <el-empty :image-size="150" description="暂无数据"></el-empty>
      </template>

      <el-table-column type="index" label="序号" width="80">
        <template v-slot="scope">
          <span>{{
            (pageState.pageNum - 1) * pageState.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="monomerName" label="单体工程"> </el-table-column>
      <el-table-column prop="atypeName" label="工程类型"> </el-table-column>
      <el-table-column prop="a1TypeName" label="子工程类型"></el-table-column>
      <el-table-column prop="createTime" label="更新时间"> </el-table-column>
      <el-table-column label="完成量/启动量/验收量" width="160">
        <template #default="{ row }">
          <span>{{ row.insFinishedCount || 0 }}</span>
          <span>/</span>
          <span>{{ row.insCount || 0 }}</span>
          <span>/</span>
          <span>{{ row.itemCount || 0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="完成率" width="80">
        <template #default="{ row }">
          <span>{{ row.completeRate ? row.completeRate : 0 }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="billStatus" label="提单状态">
        <template #default="{ row }">
          <span>{{ row.billStatus === 0 ? "未提单" : "已提单" }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="80">
        <template #default="{ row }">
          <el-button
            type="text"
            size="small"
            @click="handleFill(row)"
            v-auth="`/projectsS/witness--fill`"
            >填写</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <re-pagination
      v-if="total > 0"
      :total="total"
      v-model:page="pageState.pageNum"
      v-model:limit="pageState.pageSize"
      @pagination="handleChangePage"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import RePagination from "/@/components/RePagination/index.vue";
import { witnessList } from "/@/api/construction";
import { getBaseList, getMonomer } from "/@/api/projects";
import { storageLocal } from "/@/utils/storage";
import { exportExcel } from "/@/utils/file";
const formRef = ref<HTMLFormElement | null>(null) as any;
const router = useRouter();
let projectInfo = storageLocal.getItem("projectInfo");
let sectionInfo = storageLocal.getItem("sectionInfo");
const initData = {
  atypeId: "",
  a1TypeId: "",
  createTimeStrStart: "", //
  createTimeStrEnd: "", //
  monomerId: "",
  sectionId: sectionInfo?.id,
  projectManageId: projectInfo?.id,
  isShow: 1,
  billStatus: ""
};

const formInline = reactive(initData);
const timeValue = ref(null);
const monomerList = ref([]);
const atypeList = ref([]);
const a1TypeList = ref([]);
const itemList = [
  { key: atypeList, value: "A" },
  { key: a1TypeList, value: "A1" }
];
const pageState = reactive({
  pageNum: 1,
  pageSize: 10
});
const tableData = ref([]);
const total = ref<number>(0);
const loading = ref<boolean>(false);
const formParams = ref<typeof initData>({ ...initData });

//获取数据列表
const getTableList = async (obj: object = {}) => {
  try {
    loading.value = true;
    const { code, data } = await witnessList({
      ...obj,
      ...pageState
    });
    if (code === 200) {
      tableData.value = data.list;
      total.value = data.rows;
    }
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};

//获取单体列表
const getMonomerData = async () => {
  const parmas = {
    pageNum: 1,
    pageSize: 0,
    sectionId: sectionInfo.id,
    projectManageId: projectInfo?.id
  };
  try {
    const { code, data } = await getMonomer(parmas);
    if (code === 200) {
      monomerList.value = data.list;
    }
  } catch (err) {
    console.log(err);
  }
};

// 获取工程类型，子工程类型
const getProjectBaseList = async item => {
  try {
    const { data } = await getBaseList({ itemType: item.value, pageSize: 0 });
    item["key"].value = data.list;
  } catch (err) {
    console.log(err);
  }
};

//改变时间
const handleChangeDate = item => {
  if (item) {
    formInline.createTimeStrStart = item[0];
    formInline.createTimeStrEnd = item[1];
  } else {
    formInline.createTimeStrStart = "";
    formInline.createTimeStrEnd = "";
  }
};

const handleReset = () => {
  formRef.value.resetFields();
  timeValue.value = null;
  formParams.value = initData;
  handleChangeDate(null);
  getTableList(formInline);
};

const handleSearch = () => {
  pageState.pageNum = 1;
  formParams.value = formInline;
  getTableList(formInline);
};

const handleChangePage = () => {
  getTableList(formParams.value);
};

const handleFill = row => {
  router.push({
    path: "/projectsS/construction/witness/fill",
    query: {
      id: row.id
    }
  });
};

const exportFunc = async () => {
  let formData = {
    ...formInline,
    pageNum: 1,
    pageSize: 0
  };
  exportExcel(
    "/snow-admin/monWit/witness/export",
    formData,
    `${projectInfo?.name}_${sectionInfo?.name}_施工试验/见证检测`
  );
};

onMounted(() => {
  getTableList(formInline);
});
getMonomerData();
itemList.forEach(item => {
  getProjectBaseList(item);
});
</script>

<style scoped lang="scss"></style>
